<template>
  <view class="pr-container">
    <t-header @back="navBack">{{ title }}</t-header>

    <view class="page" style="min-height: calc(100% - 50rpx)">
      <tui-no-data
        v-if="list.length == 0"
        imgUrl="/static/images/nodata.png"
        :imgWidth="179 * 2"
        :imgHeight="126 * 2"
      >
        <text>暂无配售</text>
      </tui-no-data>
      <view v-for="(item, index) in list" :key="index">
        <view class="tit">{{ item.sg_date }}</view>
        <view
          class="item"
          @click="toDetail(stock)"
          v-for="(stock, sIndex) in item.sub_info"
          :key="sIndex"
        >
          <view class="flex align-center border-bottom padding-bottom-sm">
            <image
              class="bs"
              v-if="stock.sg_type == 4"
              src="../../static/images/icons/bj.png"
              mode=""
            ></image>
            <image
              class="bs"
              v-else-if="stock.sg_type == 1 || stock.sg_type == 5"
              src="../../static/images/icons/sh.png"
              mode=""
            ></image>
            <image
              class="bs"
              v-else-if="stock.sg_type == 2 || stock.sg_type == 3"
              src="../../static/images/icons/sz.png"
              mode=""
            ></image>
            <text class="flex-sub">{{ stock.name }} {{ stock.code }}</text>
            <view class="text-orange">详情+</view>
          </view>
          <view class="padding-top-sm flex justify-between text-nomal">
            <view class="">
              <view>￥{{ stock.fx_price }}</view>
              <view class="margin-top-sm text-gray text-sm">发行价格</view>
            </view>
            <view class="text-center">
              <view>{{ stock.zq_rate }}%</view>
              <view class="margin-top-sm text-gray text-sm">中签率</view>
            </view>
            <view class="text-right">
              <view>{{ formatNumberUnit(stock.fx_num) }}股</view>
              <view class="margin-top-sm text-gray text-sm">发行总数</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { formatNumberUnit } from '@/utils/stock.js';
  import { offlineList } from '@/api/index.js';
  import { onLoad } from '@dcloudio/uni-app';

  import THeader from '@/components/views/t-header/index.vue'; // 头部组件

  const title = ref('线下配售');
  const list = ref([]);

  const navBack = () => {
    uni.navigateBack();
  };

  const getNewStocks = () => {
    offlineList({
      page: 1,
      type: 0,
    }).then((res) => {
      res.data.list.forEach((v) => {
        v.sub_info.forEach((v2) => {
          v2.zq_rate = (v2.zq_rate * 100).toFixed(2);
        });
      });
      list.value = res.data.list;
    });
  };

  onLoad((t) => {
    getNewStocks();
    if (t.name) {
      title.value = t.name;
    }
  });

  const toDetail = (item) => {
    uni.navigateTo({
      url: './new-offline-detail?id=' + item.id,
    });
  };
</script>

<style lang="scss" scoped>
  .pr-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
    box-sizing: border-box;
  }

  .page {
    padding: 0 24rpx 24rpx;
    background: transparent;
  }
  .bs {
    width: 36rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }
  .tit {
    font-size: 30rpx;
    font-weight: bold;
    margin-top: 30rpx;
  }
  .item {
    overflow: hidden;
    background: #fff;
    padding: 22rpx;
    border-radius: 34rpx;
    margin-top: 24rpx;
  }
</style>
